<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'/>
    <title>Drive</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="../node_modules/mapbox-gl/dist/mapbox-gl.css">

    <!--<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">-->
    <!--<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.css">-->
    <link rel="stylesheet" href="dist/css/winstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="../node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .bottom-panel {
            position: absolute;
            bottom: 5%;
            right: 2%;
        }

        .left-panel {
            position: absolute;
            left: 2%;
            bottom: 5%;
        }

        .marker {
            background-image: url('car.svg');
            background-size: cover;
            width: 50px;
            height: 50px;
        }

    </style>
</head>

<body>
<div id='map'></div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <a class="navbar-brand" href="#">DriveAI & GeoSOT</a>

    <div class="collapse navbar-collapse" id="navbar-collapse-basepage">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Choose <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Car 12627</a></li>
                    <li><a href="#">Car 21270</a></li>
                    <li><a href="#">Car 42782</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Map <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="li_2d_map">2D</a></li>
                    <li><a href="#" id="li_3d_map">3D</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Status <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="li_status_open">Open</a></li>
                    <li><a href="#" id="li_status_close">Close</a></li>
                </ul>
            </li>
            <li><a href="#">Setting</a></li>
        </ul>
    </div>

</nav>

<div class="bottom-panel">
    <div class="container">
        <div id="carousel-example-vertical" class="carousel vertical slide">
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <p class="ticker-headline">
                        <a href="#">
                            <strong>23:01:92.2871 117.2627,30.2827,45.98287</strong>
                        </a>
                    </p>
                </div>
                <div class="item">
                    <p class="ticker-headline">
                        <a href="#">
                            <strong>23:01:92.2871 117.2627,30.2827,45.98287</strong>
                        </a>
                    </p>
                </div>
                <div class="item">
                    <p class="ticker-headline">
                        <a href="#">
                            <strong>23:01:92.2871 117.2627,30.2827,45.98287</strong>
                        </a>
                    </p>
                </div>
                <div class="item">
                    <p class="ticker-headline">
                        <a href="#">
                            <strong>23:01:92.2871 117.2627,30.2827,45.98287</strong>
                        </a>
                    </p>
                </div>
                <div class="item">
                    <p class="ticker-headline">
                        <a href="#">
                            <strong>23:01:92.2871 117.2627,30.2827,45.98287 </strong>
                        </a>
                    </p>
                </div>
            </div>

            <!-- Controls -->
            <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

<div class="left-panel" id="panel_info">
    <div class="row">
        <div class="col-md-12" style="width: 220%">
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        导航
                    </div>
                    <div class="panel-body">
                        <label for="navi_time">时间戳：</label><a id="navi_time">10:30:07.961</a><br>
                        <label for="navi_length">字节数：</label><a id="navi_length" type="number">72</a><br>
                        <label for="navi_angle">航向角：</label><a id="navi_angle">353.7475</a><br>
                        <label for="navi_status">状态：</label><a id="navi_status">0</a><br>
                        <label for="navi_longitude">经度：</label><a id="navi_longitude">34.6954</a><br>
                        <label for="navi_latitude">纬度：</label><a id="navi_latitude">113.8616</a><br>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        雷达
                    </div>
                    <div class="panel-body">
                        <label for="laser_time">时间戳：</label><a id="laser_time">10:30:07.961</a><br/>
                        <label for="laser_l_1">Lux字节数：</label><a id="laser_l_1">5068</a><br/>
                        <label for="laser_l_2">SickI字节数：</label><a id="laser_l_2">2975</a><br/>
                        <label for="laser_l_3">SickL字节数：</label><a id="laser_l_3">3042</a><br/>
                        <label for="laser_l_4">SickR字节数：</label><a id="laser_l_4">3280</a><br/>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12" style="width: 220%">
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        车辆数据
                    </div>
                    <div class="panel-body">
                        <label for="car_time">时间戳：</label><a id="car_time">10:30:07.961</a><br/>
                        <label for="car_speed">车速：</label><a id="car_speed">20km/h</a><br/>
                        <label for="car_steering">方向盘：</label><a id="car_steering">-47°</a><br/>
                        <label for="car_gas">油门开度：</label><a id="car_gas">35%</a><br/>
                        <label for="car_brake">制动开度：</label><a id="car_brake">0%</a><br/>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        MobileEye
                    </div>
                    <div class="panel-body">
                        <label for="car_time">时间戳：</label><a id="mobile_time">10:30:07.961</a><br/>
                        <label for="car_speed">障碍物数量：</label><a id="mobile_collision">41</a><br/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiemhpbmVuZ2ppYXNoaSIsImEiOiJjajdyYnVvcm40YnFmMndvMnhqMXBjdzQ3In0.VoGV5IHrJPEkU2m8CemHAQ';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/zhinengjiashi/cj7tr9fs91i0f2rp8jlmlotpg', // stylesheet location
        center: [116.3005, 39.9855], // starting position [lng, lat]
        pitch: 0,
//        bearing: -17.6,
        zoom: 18 // starting zoom
    });
    var el = document.createElement('div');
    el.className = 'marker';
    var carMarker = new mapboxgl.Marker(el, {offset: [0, 0]})
            .setLngLat([0, 0]).setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
             .setHTML('<h3 class="text-info">2017 20:02:43</h3><h5 class="text-primary">116.39272,39.92726,40.2626</h5><img src="scene_img/scene1.png">'))
            .addTo(map);
    var red = '#ff0000';
    var blue = '#33C9EB';
    var green = '#3bdf00';
    var yellow = '#fcf000';
    var randomColor = [red, green, yellow];
    var origin = [116.3, 39.9];
    var startX = 116.25, endX = 116.35;
    var startY = 39.95, endY = 40.02;
    var detaX = 0.0005, detaY = 0.0004;
    var COLS = parseInt((endX - startX) / detaX) + 1;
    var ROWS = parseInt((endY - startY) / detaY) + 1;
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [116.30806, 39.98534]
                ]
            }
        }]
    };

    var gridjson = {
        'type': 'FeatureCollection',
        'features': []
    };

    var neighgrid = {
        'type': 'FeatureCollection',
        'features': []
    };
    var speedFactor = 30; // number of frames per longitude degree
    var animation; // to store and cancel the animation
    var startTime = 0;
    var progress = 0; // progress = timestamp - startTime
    var resetTime = false; // indicator of whether time reset is needed for the animation
    var pauseButton = document.getElementById('pause');
    var socket = io();
    var connected = false;
    // geojson.features[0].geometry.coordinates.pop();
    socket.on('new message', function (data) {

        // var message=data.message;
        console.log(data.message);
        var messageList = data.message.split(",");
        for (var i in messageList) {
            var message = messageList[i];
            var coord = message.split(" ").map(function (e) {
                return parseFloat(e)
            });
            geojson.features[0].geometry.coordinates.push([coord[0], coord[1]]);
            carMarker.setLngLat([coord[0], coord[1]]);
            var col = parseInt((coord[0] - startX) / detaX);
            var row = parseInt((coord[1] - startY) / detaY);
            var index = col * ROWS + row;
            if (index < gridjson.features.length && index > 0) {
                gridjson.features[index].properties.color = red;
                gridjson.features[index + 1].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index - 1].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index + ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index + 1 + ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index - 1 + ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index - ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index + 1 - ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
                gridjson.features[index - 1 - ROWS].properties.color = randomColor[Math.floor(Math.random() * 3)];
            }

        }
        map.getSource('grid').setData(gridjson);
        map.getSource('line-animation').setData(geojson);
        map.setCenter([coord[0], coord[1]]);
    });

    socket.on('login', function (data) {
        connected = true;
    });

    map.on('load', function () {

        map.addLayer({
            'id': 'grid',
            'type': 'fill',
            'source': {
                'type': 'geojson',
                'data': gridjson
            },
            'layout': {},
            'paint': {
                'fill-outline-color': "#333",
                'fill-color': {
                    'type': 'identity',
                    'property': 'color'
                },
                'fill-opacity': 0.2
            }
        });
        map.addLayer({
            'id': 'barriers1',
            'type': 'fill',
            'source': {
                'type': 'geojson',
                'data': gridjson
            },
            'layout': {},
            'paint': {
                'fill-outline-color': "#333",
                'fill-color': {
                    'type': 'identity',
                    'property': 'color'
                },
                'fill-opacity': 0.2
            }
        });
        map.addLayer({
            'id': 'neighbor',
            'type': 'fill',
            'source': {
                'type': 'geojson',
                'data': neighgrid
            },
            'layout': {},
            'paint': {
                'fill-outline-color': "#333",
                'fill-color': {
                    'type': 'identity',
                    'property': 'color'
                },
                'fill-opacity': 0.2
            }
        });
        // add the line which will be modified in the animation
        map.addLayer({
            'id': 'line-animation',
            'type': 'line',
            'source': {
                'type': 'geojson',
                'data': geojson
            },
            'layout': {
                'line-cap': 'round',
                'line-join': 'round'
            },
            'paint': {
                'line-color': '#ed6498',
                'line-width': 5,
                'line-opacity': .8
            }
        });

        map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',
                'fill-extrusion-height': {
                    'type': 'identity',
                    'property': 'height'
                },
                'fill-extrusion-base': {
                    'type': 'identity',
                    'property': 'min_height'
                },
                'fill-extrusion-opacity': .6
            }
        });
        geojson.features[0].geometry.coordinates.pop();

        // map.getSource('grid').setData(gridjson);
//            startTime = performance.now();
//            pauseButton.addEventListener('click', function () {
//                pauseButton.classList.toggle('pause');
//                if (pauseButton.classList.contains('pause')) {
//                    cancelAnimationFrame(animation);
//                } else {
//                    resetTime = true;
//                    animateLine();
//                }
//            });

        // reset startTime and progress once the tab loses or gains focus
        // requestAnimationFrame also pauses on hidden tabs by default
//            document.addEventListener('visibilitychange', function () {
//                resetTime = true;
//            });

        // animated in a circle as a sine wave along the map.
        function animateLine(timestamp) {
        }

        (function () {

            for (var x = startX; x <= endX; x += detaX) {
                for (var y = startY; y <= endY; y += detaY) {
                    gridjson.features.push(
                            {
                                'type': 'Feature',
                                'properties': {
                                    'color': blue
                                },
                                'geometry': {
                                    'type': 'Polygon',
                                    'coordinates': [
                                        [
                                            [x, y],
                                            [x + detaX, y],
                                            [x + detaX, y + detaY],
                                            [x, y + detaY],
                                            [x, y],
                                        ]
                                    ]
                                }
                            }
                    )
                }
            }
        }());
        map.getSource('grid').setData(gridjson);
    });
    $(document).ready(function () {
        $("#li_2d_map").click(function () {
            map.setPitch(0);
        });
        $("#li_3d_map").click(function () {
            map.setPitch(45);
        });
//        $(".gps-list").bootstrapNews({
//            newsPerPage: 5,
//            autoplay: true,
//            pauseOnHover: true,
//            direction: 'up',
//            newsTickerInterval: 4000,
//            onToDo: function () {
//            }
//        });
        $("#li_status_open").click(function(){
            $("#panel_info").css("visibility",'visible');
        });
        $("#li_status_close").click(function(){
            $("#panel_info").css("visibility",'hidden');
        });
    });
</script>

</body>

</html>